<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>缓存全局变量</title>
  </head>
  <body>
    <input type="button" class="btn" id="btn1" />
    <input type="button" class="btn" id="btn2" />
    <input type="button" class="btn" id="btn3" />
    <input type="button" class="btn" id="btn4" />
    <p>1111</p>
    <input type="button" class="btn" id="btn5" />
    <input type="button" class="btn" id="btn6" />
    <input type="button" class="btn" id="btn7" />
    <input type="button" class="btn" id="btn8" />
    <p>2222</p>
    <input type="button" class="btn" id="btn9" />
    <input type="button" class="btn" id="btn10" />
    <script>
      // 0.73% slower
      function getBtn() {
        let oBtn1 = document.getElementById('btn1')
        let oBtn3 = document.getElementById('btn3')
        let oBtn5 = document.getElementById('btn5')
        let oBtn7 = document.getElementById('btn7')
        let oBtn9 = document.getElementById('btn9')
      }
      // 缓存
      function getBtn2() {
        let obj = document
        let oBtn1 = obj.getElementById('btn1')
        let oBtn3 = obj.getElementById('btn3')
        let oBtn5 = obj.getElementById('btn5')
        let oBtn7 = obj.getElementById('btn7')
        let oBtn9 = obj.getElementById('btn9')
      }
    </script>
  </body>
</html>
